<template>
  <div>
    <div class="pie_left"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.$nextTick((item) => {
      this.huaData();
    });
  },
  methods: {
    huaData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector(".pie_left"));

      let option = {
        // 该属性在鼠标划过某一个时是否展示其数据
        tooltip: {
          trigger: "item",
        },
        legend: {
          // 设置图例为垂直
          type: "scroll",
          orient: "vertical",
          // 设置图例垂直居中
          y: "center",
          right: "5%",
          // 设置图例之间 垂直上下（左右水平）距离
          itemGap: 40,
          icon: "roundRect",
          // 设置图列每一项的宽高
          itemWidth: 40,
          itemHeight: 20,
          textStyle: {
            //图例文字的样式
            color: "#333",
            fontSize: 20,
            fontFamily: "微软雅黑",
          },
        },
        series: [
          {
            // 饼图主题的位置
            center: ["30%", "50%"],
            // 鼠标划过显示的数据的标题
            name: "Access From",
            // 饼图
            type: "pie",
            // 饼图的半径
            radius: ["55%", "70%"],
            // 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
            // 需要强制所有标签放在中心位置，可以将该值设为 false
            avoidLabelOverlap: false,
            itemStyle: {
              // 用于指定饼图扇形区块的内外圆角半径，支持设置固定数值或者相对于扇形区块的半径的百分比值。
              borderRadius: 20,
              // 图形的描边颜色
              borderColor: "#fff",
              // 描边线宽。为 0 时无描边
              borderWidth: 2,
              // 自定义颜色
              color: function (params) {
                //自定义颜色
                var colorList = ["#fe7371", "#6ED301", "#339AFE", "#FF7B00"];
                return colorList[params.dataIndex];
              },
            },
            // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
            label: {
              // normal 是图形在默认状态下的样式
              normal: {
                show: true,
                position: "center",
                // 圆环中心显示的内容
                formatter: "{total|" + 111 + "%}",
                // 可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果
                rich: {
                  total: {
                    fontSize: 26,
                    fontFamily: "微软雅黑",
                    color: "#333",
                  },
                },
              },
            },
            // 设置高亮
            emphasis: {
              label: {
                // 取消圆环图鼠标滑过内容居中显示(当在lable中设置formatter属性时因该设置true",)
                show: true,
                // 文字样式
                // fontSize: '40',
                // fontWeight: 'bold'
              },
            },
            // 标签的视觉引导线配置
            labelLine: {
              show: false,
            },
            // 饼图数据
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
            ],
          },
        ],
      };
      // 3,绘图
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.pie_left {
  width: 100%;
  height: 300px;
  display: inline-block;
}
</style>